<template>
    <view class="outReport_container">
        <fl-navBar dark :border="false" title="车辆登记" color="#333333" :fixed="true" left-icon="left" background-color="#fff"
            status-bar />
         <view class="tabs_box">
            <view v-show="ele.show" :class="{ act: current === index }" class="tab_item" @tap="handleClick(ele, index)"
                v-for="(ele, index) in list" :key="index">
                {{ ele.name }}
                <text :class="current === index ? 'border acborder' : 'border'"></text>
            </view>
        </view>
        <view class="outReport_content">
            <AskApply  v-if="auth.hasPermi('oa:out:own') && current == 0" />
            <BossApprove :isLoad="isLoad" v-if="auth.hasPermi('oa:out:chk') && current == 1" />
            <History :isLoad="isLoad" v-if="current === 2 && auth.hasPermi('oa:out:own')" />
        </view>

    </view>
</template>
<script setup>
import History from './History.vue'
import AskApply from './AskApply.vue'
import BossApprove from './BossApprove.vue'
import { ref } from 'vue'
import auth from '@/plugins/auth'
import { onLoad, onShow } from "@dcloudio/uni-app";
const list = ref([
    { name: '车辆登记', type: 0, show: auth.hasPermi('oa:out:own') },
    { name: '审批', type: 1, show: auth.hasPermi('oa:out:chk') },
    { name: '历史记录', type: 2, show: auth.hasPermi('oa:out:own') },
])
const isLoad = ref('')
const current = ref(0)
const type = ref(0)
const handleClick = (ele, index) => {
    current.value = index
    type.value = ele.type
}
onShow(() => {
 
    uni.$on('loadList', () => {
        console.log('主页面');
        isLoad.value = new Date().getTime() + Math.random()
        uni.$off('loadList')
    })

})
onLoad(() => {
    // console.log(auth.hasPermi('oa:out:own'),'出行报备');
    // console.log(auth.hasPermi('oa:out:chk'),'报备审核');
    if (auth.hasPermi('oa:out:chk') && !auth.hasPermi('oa:out:own')) {
        current.value = 1
    }

})
</script>
  
<style scoped lang="scss">
.outReport_container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    background-color: #fff;


    .tabs_box {
        display: flex;
        width: 90%;
        margin: 10rpx auto 0;
        height: 70rpx;

        .tab_item {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
            font-size: 32rpx;
            color: #333333;

            .border {
                position: absolute;
                bottom: 0rpx;
                left: 50%;
                transform: translateX(-50%);
                width: 66rpx;
                height: 7rpx;
                background-color: transparent;
                border-radius: 3rpx;
            }

            .acborder {
                background-color: #0D80D7;
            }
        }

        .act {
            color: #0D80D7;
        }
    }

    .outReport_content {
        flex: 1;
        height: 100%;
        overflow: hidden;
    }


}
</style>
  